<!-- 开设处方 -->
<template>
    <el-row>
        <el-col :span="24">
            <el-table :data="prescriptionList" style="width: 100%">
                <el-table-column label="药品名称" prop="drugInfo.drugName" width="120"/>
                <el-table-column label="药品规格" prop="drugInfo.drugFormat" width="120"/>
                <el-table-column label="用法用量" width="160">
                    <template #default="{row}">
                        <span v-if="row.id">{{row.drugUsage}}</span>
                        <el-input v-else v-model="row.drugUsage"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="数量" width="80">
                    <template #default="{row}">
                        <span v-if="row.id">{{row.drugNumber}}</span>
                        <el-input-number v-else v-model="row.drugNumber" :min="1"/>
                    </template>
                </el-table-column>
                <el-table-column label="药品价格" prop="drugInfo.drugPrice" width="120"/>
                <el-table-column align="right" width="160">
                    <template #header>
                        <el-button size="small" @click="savePresList">
                            保存
                        </el-button>
                        <!-- 点击弹出药品搜索的对话框 -->
                        <el-button size="small" @click="dialogVisible=true">
                            增加
                        </el-button>
                    </template>
                    <template #default="{row}">
                        <el-button
                            size="small"
                            type="danger"
                            :disabled="row.drugState!='已开立'"
                            @click="handleDelete(row.id)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>

    <el-dialog v-model="dialogVisible" title="添加药品" width="700" height="400" draggable>
        <el-row>
            <el-col :span="8">
                <el-input v-model="drugQuery.drugName" placeholder="请输入名称搜索"/>
            </el-col>
            <el-col :span="3">
                <el-button @click="searchDrug">搜索</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table :data="drugList" stripe style="width: 100%" 
                @selection-change="handleSelectionChange">
                    <el-table-column type="selection"  width="55" />
                    <el-table-column prop="drugName" label="药品名称"  />
                    <el-table-column prop="drugFormat" label="药品规格"  />
                    <el-table-column prop="drugUnit" label="包装单位"  />
                    <el-table-column prop="drugPrice" label="药品单价"  />
                    <el-table-column prop="drugDosage" label="药剂类型"  />
                    <el-table-column prop="manufacturer" label="生产厂家"  />
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-button @click="addPrescription">保存</el-button>
            </el-col>
        </el-row> 

    </el-dialog>
</template>

<script setup>
import httpRequest from '@/common';
import { ElMessage } from 'element-plus';
import {ref,getCurrentInstance, defineProps, watch, computed} from 'vue';
import store from '@/store';

const {proxy} = getCurrentInstance();
//处方的删除
    const handleDelete=(id)=>{
        proxy.$axios({
            method:'delete',
            url:'/prescription/'+id
        }).then(res=>{
            let resultBean=res.data;
            if(resultBean.code==200) {
                ElMessage.success('删除处方成功');
                getPrescription();

            } else {
                ElMessage.error('删除处方出错');
            }
        }).catch(error=>{
            ElMessage.error(error.message);
        })
    }

//获取父组件传递的registerId  挂号id
const props = defineProps({
    rid:{
        type: Number,
        required: true
    }
});

const registerId = ref(null);

const dialogVisible = ref(false);

//选中项的id集合
let selectOptions = ref([]);

//表格中多选框选中或取消时会触发  也就是选中项变化
const handleSelectionChange = (newSelection)=>{
    console.log('选中项改变',newSelection);
    selectOptions.value = []; //清空
    newSelection.forEach((selOp)=>{
        selectOptions.value.push(selOp);
    });
}

//搜索药品的条件
const drugQuery = ref({
    drugName: ''  //药品名称
})

//搜索到的药品列表
const drugList = ref([])

//搜索药品
const searchDrug = ()=>{
    httpRequest(
        proxy,
        'post',
        '/drug/conditions',
        drugQuery.value,
        resultBean=>{
            drugList.value = resultBean.data;
        }
    )
}

const prescriptionList = ref([])

const getPrescription = ()=>{
    httpRequest(
            proxy,
            'post',
            '/prescription/conditions',
            {
                registerId: registerId.value
            },
            resultBean=>{
                prescriptionList.value = resultBean.data;
            }
        )

}

const addPresList = ref([])

//将选中的药品添加到页面的表格中显示
const addPrescription = ()=>{
    //循环选中的药品
    selectOptions.value.forEach(drug=>{
        let pres = {
            registerId: registerId.value,
            drugId: drug.id,
            drugNumber: 1,
            drugInfo: drug,
            drugState: '已开立'
        }
        //页面显示的医生开药的列表中
        prescriptionList.value.push(pres);
        //加入预备添加到数据库中的医生开药的列表中
        addPresList.value.push(pres);
    })
    // dialogVisible.value = false;
}

//保存医生开药信息  给prescription表中添加数据
const savePresList = ()=>{

    httpRequest(
        proxy,
        'post',
        '/prescription/addbatch',
        addPresList.value,
        resultBean=>{
            ElMessage.success('保存处方成功');
            getPrescription();
            addPresList.value = [];
        }
    )

}

// onMounted(()=>{
//     console.log('--------------WritePres被激活---------------')
//     setTimeout(()=>{
//         registerId.value = props.rid;
//         getPrescription();
//     },200);
    
// })

const activeTab = computed(()=>{
    return store.state.mrActiveTab;
})

watch(activeTab,(newValue,oldValue)=>{
    console.log('--------标签页切换了-------------------',newValue);
    if(newValue=='writepres'){
        registerId.value = props.rid;
        getPrescription();
    }
    
},{
    immediate: true 
})



</script>

<style>
</style>